<template>
  <!-- 公用的模态框组件 zhu: 类似于element的Dialog -->
  <div class="dialog__wrapper" v-show="visible" @click.self="handleCloseDialog">
    <div class="dialog" v-if="type == 'bottom'">
      <div class="dialog__header" v-if="$slots.header">
        <slot name="header"></slot>
      </div>
      <div class="dialog__header" v-else>
        <span class="dialog__title">{{title}}</span>
        <img class="dialog_close lusir-common_cursor" v-if="showCloseIcon" @click.stop="handleCloseDialog" src="../assets/images/button_close.png" alt="">
      </div>
      <div class="dialog__body">
        <!-- 默认插槽 -->
        <slot></slot>
      </div>
      <div class="dialog__footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
      <div class="dialog__footer" v-else>
        <div class="confirmBtn spaceHalf lusir-common_cursor" @click.stop="handleConfirmDialog">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "lusirDialog",
  props: {
    title: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "bottom", // bottom确认消息   center   top提交内容
    },
    visible: {
      type: Boolean,
      default: false
    },
    showCloseIcon: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleCloseDialog() {
      this.$emit("cancel", false);
    },
    handleConfirmDialog() {
      this.$emit("comfirm", false);
    }
  },
};
</script>

<style scpoed lang="stylus">
.dialog__wrapper
  position fixed
  width 100vw
  height 100vh
  z-index 2001
  left 0
  top 0
  background rgba(0, 0, 0, 0.48)
  .dialog
    position fixed
    left 0
    bottom 0
    background-color #fff
    width 100%
    border-radius 0.21rem 0.21rem 0 0
    overflow hidden
    .dialog__header
      width 100%
      padding 0.32rem 0.4rem
      font-size 0.4rem
      height 1.3rem
      box-sizing border-box
      text-align center
      color #333333
      display flex
      align-items center
      justify-content space-between
      border-bottom 1px solid #e8e8e8
      .dialog__title
        font-size 0.48rem
        font-weight 550
        color #333333
      .dialog_close
        width 0.4rem
        height 0.4rem
    .dialog__footer
      display flex
      justify-content center
      border-top 1px solid #e8e8e8
      padding 1.13rem 0.32rem 0.32rem
      .confirmBtn
        width 9.36rem
        height 1.3rem
        background #e74c3c
        border-radius 0.1rem
        font-size 0.48rem
        color #ffffff
        display flex
        justify-content center
        align-items center
</style>
